<template>
  <div class="app-contailer">
      <el-row :gutter="15">
        <MmvTitle title="新增活动模板">
        </MmvTitle>
    <el-form ref="form" :model="form" title="新增活动模板" :rules="rules" label-width="100px">
      <el-col :span="24">
      <el-form-item label="模板code" prop="code">
        <el-input v-model="form.code" placeholder="请输入模板code" maxlength="10" style="width: 20%;"
                  show-word-limit/>
      </el-form-item>
      </el-col>
      <el-col :span="8">
      <el-form-item label="模板分类" prop="templateClassification"   >
        <el-select v-model="form.templateClassification" placeholder="请选择模板分类"  @change="templateClassificationChange">
          <el-option label="优惠券模板" value="1" key="1"></el-option>
          <el-option label="车型模板" value="2" key="2"></el-option>
          <el-option label="节日模板" value="3" key="3"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="8">
      <el-form-item label="模板类型" prop="templateType"  >
        <el-select v-model="form.templateType" placeholder="请选择模板类型"  @change="templateTypeChange">
          <el-option label="优惠券图文活动" value="1" key="1" v-if="form.templateClassification==1 || form.templateClassification==3"></el-option>
          <el-option label="车型图文活动" value="2" key="2" v-if="form.templateClassification==2 || form.templateClassification==3"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="8">
      <el-form-item label="模板名称" prop="templateName"  >
        <el-select v-model="form.templateName" placeholder="请选择模板名称"  >
          <template v-for="dict in dict.type.coupon_template" v-if="form.templateType==1 && form.templateClassification==1">
            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </template>
          <template v-for="dict in dict.type.model_template" v-if="form.templateType==2 && form.templateClassification==2">
            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </template>
          <template v-for="dict in dict.type.holiday_coupon_template" v-if="form.templateType==1 && form.templateClassification==3">
            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </template>
          <template v-for="dict in dict.type.holiday_model_template" v-if="form.templateType==2 && form.templateClassification==3">
            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </template>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          v-for="(domain, index) in form.headlineList"
          :label="'模板标题' + (index+1)"
          :key="domain.key"
          :prop="'headlineList.' + index + '.value'"
          :rules="{
          required: true, message: '模板标题不能为空', trigger: 'blur'
        }"
        >
          <el-input v-model="domain.value" placeholder="请输入模板标题" maxlength="10" style="width: 20%;"
                    show-word-limit>
            <template slot="append" v-if="index==0"><el-button @click="addDomain" >新增</el-button> </template>
            <template slot="append" v-if="index>0"><el-button @click.prevent="removeDomain(domain)">删除</el-button> </template>
            </el-input>

        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          v-for="(nr, index) in form.contentList"
          :label="'模板内容' + (index+1)"
          :key="nr.key"
          :prop="'contentList.' + index + '.value'"
          :rules="{required: true, message: '模板内容不能为空', trigger: 'blur'}"
        >
          <el-row>
            <el-col :span="12">
              <el-input v-model="nr.value" type="textarea" placeholder="请输入模板内容" maxlength="80"
                        show-word-limit/>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-button @click="addContent" v-if="index==0" type="primary">新增</el-button>
              <el-button @click.prevent="removeContent(nr)" v-if="index>0" type="danger">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
			<el-col :span="24">
			  <el-form-item
			    v-for="(cw, index) in form.copywritingList"
			    :label="'推广文案' + (index+1)"
			    :key="cw.key"
			    :prop="'copywritingList.' + index + '.value'"
			    :rules="{required: true, message: '推广文案不能为空', trigger: 'blur'}"
			  >
			    <el-row>
			      <el-col :span="12">
			        <el-input v-model="cw.value" type="textarea" placeholder="请输入推广文案" maxlength="80"
			                  show-word-limit/>
			      </el-col>
			      <el-col :span="11" :offset="1">
			        <el-button @click="addCopywriting" v-if="index==0" type="warning">新增</el-button>
			        <el-button @click.prevent="removeCopywriting(cw)" v-if="index>0" type="danger">删除</el-button>
			      </el-col>
			    </el-row>
			  </el-form-item>
			</el-col>
      <el-col :span="24">
      <el-form-item label="备注" prop="remark" tyle="width: 50%;">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" style="width: 50%;" maxlength="200" show-word-limit />
      </el-form-item>
      </el-col>
      <el-col :span="24">
      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
      </el-col>
    </el-form>
    </el-row>
  </div>
</template>

<script>
  import {  addTemplate } from "@/api/system/template";
  import MmvTitle from "@/components/MmvUI/MmvTitle";
  import MmvTitleSmall from "@/components/MmvUI/MmvTitleSmall";

export default {
  components: {
    MmvTitle,
    MmvTitleSmall
  },
  dicts: ['coupon_template','model_template','holiday_coupon_template','holiday_model_template'],
  data() {
    return {
      // 表单参数
      form: {
        templateId: null,
        code: null,
        templateClassification: null,
        templateType: null,
        templateName: null,
        headlineList: [{
          value: '',
          kry:'1'
        }],
		copywritingList: [{
		  value: '',
		  kry:'1'
		}],		
        contentList:[{
          value:'',
          kry:'1'
        }]
      },
      // 表单校验
      rules: {
        code:{required: true, message: '模板code不能为空', trigger: 'blur' },
        templateClassification:{required: true, message: '模板分类不能为空', trigger: 'change'},
        templateType:{required: true, message: '模板类型不能为空', trigger: 'change'},
        templateName:{required: true, message: '模板名称不能为空', trigger: 'change'},
      }
    }
  },
  created() {
  },

  methods: {
	  removeCopywriting(item) {
	    var index = this.form.copywritingList.indexOf(item)
	    if (index !== -1) {
	      this.form.copywritingList.splice(index, 1)
	    }
	  },
	  addCopywriting() {
	    this.form.copywritingList.push({
	      value: '',
	      key: Date.now()
	    });
	  },
    removeContent(item) {
      var index = this.form.contentList.indexOf(item)
      if (index !== -1) {
        this.form.contentList.splice(index, 1)
      }
    },
    addContent() {
      this.form.contentList.push({
        value: '',
        key: Date.now()
      });
    },
    removeDomain(item) {
      var index = this.form.headlineList.indexOf(item)
      if (index !== -1) {
        this.form.headlineList.splice(index, 1)
      }
    },
    addDomain() {
      this.form.headlineList.push({
        value: '',
        key: Date.now()
      });
    },
    templateClassificationChange(){
      this.form.templateType=null;
      this.form.templateName=null;
    },
    templateTypeChange(){
      this.form.templateName=null;
    },
    // 取消按钮
    cancel() {
      this.goBack();
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        templateId: null,
        code: null,
        templateClassification: null,
        templateType: null,
        templateName: null,
        headlineList: [{
          key:'1',
          value: ''
        }],
		copywritingList: [{
		  key:'1',
		  value: ''
		}],
        contentList:[{
          key:'1',
          value:''
      }]
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addTemplate(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.goBack();
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
        this.$store.state.tagsView.visitedViews.length - 1
          ].path
      )
      this.parent.getList();
      var index = parent.layer.getFrameIndex(window.name);
      parent.layer.close(index);
    },
  },
}
</script>
